<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{date | formatDate}}
</div>
</body>
<script>
    var padDate = function (value) {
        return value < 10 ? '0' + value : value;
    };
    var yyf = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        filters: {
            formatDate: function (value) {//这里的value就是要过滤的数据
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth() + 1);
                var day = padDate(date.getDate());
                var hours = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var seconds = padDate(date.getSeconds());
                return year + "-" + month + "-" + day + "  " + hours + ":" + minutes + ":" + seconds;
            }
        },
        mounted: function () {
            var vm = this;
            vm.timer = setInterval(function () {
                vm.date = new Date(); //修改数据
            }, 1000)
        }
        ,
        beforeDestroy: function () {
            if (this.timer) {
                clearInterval(this.timer); //清除定时器
            }
        }

    })
</script>
</html>